<template>
  <view class="container">
    <view class="header-box"></view>
    <view class="body-box">
      <view class="main">
        <view class="box2">
          <view
            :class="navId === 'login' ? 'active' : 'unactive'"
            @click="itemClick('login')">
            登录
            <view class="line" v-show="navId === 'login'"></view>
          </view>
          <view
            :class="navId === 'register' ? 'active' : 'unactive'"
            @click="itemClick('register')">
            注册
            <view class="line" v-show="navId === 'register'"></view>
          </view>
        </view>
        <!-- 登录 -->
        <view class="box3" v-if="navId === 'login'">
          <view class="items">
            <up-icon
              name="account"
              size="22"
              style="margin-right: 16rpx"
              color="#C7D4DD"></up-icon>
            <input
              class="uni-input"
              focus
              placeholder="请输入手机号"
              v-model="loginForm.phone" />
          </view>
          <view class="items" style="margin-top: 20rpx">
            <up-icon
              name="lock"
              size="22"
              style="margin-right: 16rpx"
              color="#C7D4DD"></up-icon>
            <input
              class="uni-input"
              type="password"
              placeholder="请输入密码"
              v-model="loginForm.password" />
          </view>
          <view
            class="submitLogin"
            style="position: relative; left: 0; top: 0"
            @click="login">
            <text>登录</text>
          </view>
          <view
            class=""
            style="
              width: 100%;
              text-align: center;
              font-size: 24rpx;
              line-height: 33rpx;
              margin-top: 60rpx;
            ">
            登录即同意
            <text style="color: #1c85c8">
              <text @click="userText">用户协议</text>
              、
              <text @click="secretText">隐私协议</text>
            </text>
          </view>
        </view>
        <!-- 注册 -->
        <view class="box3" v-else>
          <view class="items">
            <up-icon
              name="account"
              size="22"
              style="margin-right: 16rpx"
              color="#C7D4DD"></up-icon>
            <input
              class="uni-input"
              focus
              placeholder="请输入手机号"
              v-model="registerForm.phone" />
          </view>
          <view class="items" style="margin-top: 20rpx">
            <up-icon
              name="lock"
              size="22"
              style="margin-right: 16rpx"
              color="#C7D4DD"></up-icon>
            <input
              class="uni-input"
              type="password"
              placeholder="请输入密码"
              v-model="registerForm.password" />
          </view>
          <view class="items" style="margin-top: 20rpx">
            <up-icon
              name="lock"
              size="22"
              style="margin-right: 16rpx"
              color="#C7D4DD"></up-icon>
            <input
              class="uni-input"
              type="password"
              placeholder="请再次输入密码"
              v-model="registerForm.rePassword" />
          </view>
          <view
            class="submitLogin"
            style="position: relative; left: 0; top: 0"
            @click="register">
            <text>注册</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { registerService, loginService } from '../../api/user.js'
import { useUserStore } from '../../stores/user.js'
import { getStarService } from '../../api/star.js'
import { getCartByUserId } from '../../api/cart.js'
import { useCartStore } from '../../stores/cart.js'

const userStore = useUserStore()
const cartStore = useCartStore()

const navId = ref('login')
const itemClick = (value) => {
  navId.value = value
}
// 登录表单
const loginForm = ref({
  phone: '',
  password: '',
})
// 注册表单
const registerForm = ref({
  phone: '',
  password: '',
  rePassword: '',
})
// 登录
const login = async () => {
  const res = await loginService(loginForm.value)
  if (res.code === '0') {
    uni.showToast({
      title: '登录成功',
      icon: 'success',
    })
    userStore.setUserInfo(res.data)
    // 获取登录用户的收藏列表
    const star = await getStarService(userStore.userInfo.userId)
    userStore.setStarList(star.data ? star.data : [])
    // 获取登录用户的购物车列表
    const cart = await getCartByUserId(userStore.userInfo.userId)
    cartStore.setCar(cart.data ? cart.data : [])
    cartStore.setGoodsNum(cart.data.length)
    // 跳转回我的页面
    setTimeout(() => {
      uni.reLaunch({
        url: '/pages/mine/mine',
      })
    }, 1200)
  } else {
    uni.showToast({
      title: res.message,
      icon: 'none',
    })
  }
}

// 注册
const register = async () => {
  const res = await registerService(registerForm.value)
  if (res.code === '0') {
    uni.showToast({
      title: '注册成功',
      icon: 'success',
    })
    registerForm.value = {
      phone: '',
      password: '',
      rePassword: '',
    }
    navId.value = 'login'
  } else {
    uni.showToast({
      title: res.message,
      icon: 'none',
    })
  }
}
</script>

<style>
page {
  background: linear-gradient(to top right, #f4f4f4, #f9f9f9);
}
</style>
<style lang="scss" scoped>
.container {
  .header-box {
    width: 100%;
    height: 500rpx;
    background: linear-gradient(to top right, #ffbbc0, #ffdbdd);
  }
  .body-box {
    width: 100%;
    height: 300rpx;
    margin-top: -80rpx;
    display: flex;
    justify-content: center;
    .main {
      width: 670rpx;
      height: 590rpx;
      background-color: #ffffff;
      box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.05);
      border-radius: 40rpx;
      .box2 {
        width: 100%;
        display: flex;
        align-items: center;
        padding: 40rpx;
        view {
          margin-right: 50rpx;
          font-size: 30rpx;
          color: #999999;
          line-height: 40rpx;
          font-weight: bold;
        }
        .active {
          font-size: 46rpx;
          font-weight: bold;
          color: #ffbbc0;
          line-height: 65rpx;
        }
        .line {
          width: 100%;
          height: 6rpx;
          background: linear-gradient(122deg, #ffbbc0 0%, #ffdbdd 100%);
          border-radius: 3rpx;
          position: relative;
          left: 0;
          top: 0;
        }
      }
      .box3 {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        .items {
          width: 550rpx;
          height: 92rpx;
          background: #f8f8f8;
          border-radius: 10rpx;
          display: flex;
          align-items: center;
          padding: 0 30rpx;
          .uni-input {
            flex: 1;
            font-size: 26rpx;
            color: #333333;
            line-height: 37rpx;
          }
        }
        .submitLogin {
          width: 80%;
          height: 80rpx;
          margin: 0 auto;
          margin-top: 25rpx;
          border-radius: 20rpx;
          background: linear-gradient(to top right, #ffbbc0, #ffdbdd);
          font-size: 40rpx;
          color: #ffffff;
          font-weight: 400;
          letter-spacing: 20rpx;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
}
</style>
